<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>RustU</title>
        <link rel="stylesheet" href="styles.css" />
        <link rel="stylesheet" href="/assets/css/paper.css" />
        <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
        <script src="/assets/js/bootstrap.bundle.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
        <style>
            :root {
                --footer-height: 60px;
                --card-min-height: 180px;
                --card-margin-top: 25px;
            }

            html, body {
                height: 100%;
                margin: 20px;
            }

            .content-wrap {
                min-height: calc(100% - var(--footer-height) - 40px; /* 40px for body margin */
                margin-bottom: calc(var(--footer-height) * -1);
            }

            a {
                text-decoration: none;
            }

            .blog-card {
                width: 25rem;
                min-height: var(--card-min-height);
                margin-top: var(--card-margin-top);
            }

            footer {
                height: var(--footer-height);
                text-align: center;
                padding: 20px 0;
                position: relative;
                margin-top: 80px;
            }

            .pagination-container {
                margin-top: 3rem;
            }

            @media (max-width: 992px) {
                .blog-card {
                    width: 100%;
                }
            }
        </style>
    </head>

    <body>
        <main class="content-wrap">
            <div class="container">
                <div class="row">
                    {% for column in [vec1, vec2, vec3] %}
                    <div class="col-md-4 col-sm-1 col-lg-4">
                        {% for article in column %}
                        <div class="card shadow blog-card text-break">
                            <a
                                href="/article/{{article.id|e}}"
                                class="card-body"
                            >
                                <h4 class="card-title">{{article.title|e}}</h4>
                                <p class="card-text">{{article.summary|e}}</p>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
            </div>

            <div class="container pagination-container">
                <div class="row justify-content-center">
                    <div class="col-auto">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li class="page-item">
                                    <a
                                        id="prePage"
                                        class="page-link"
                                        href="#"
                                        aria-label="Previous"
                                    >
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item" id="page1">
                                    <a class="page-link" href="/list/1">1</a>
                                </li>
                                <li class="page-item">
                                    <a
                                        id="nextPage"
                                        class="page-link"
                                        href="#"
                                        aria-label="Next"
                                    >
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </main>

        <footer>
            <p>
                粤公网安备44011802000978号 ICP备案： 粤ICP备2024315825号-1
                &copy; 2024 你我同锈. All rights reserved.
            </p>
        </footer>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const currentPage = {{page_num}};
                const totalPages = {{page_total}};
                const paginationContainer = document.querySelector('.pagination');

                // Helper function to create page item
                const createPageItem = (pageNum, isActive = false) => {
                    const li = document.createElement('li');
                    li.className = `page-item ${isActive ? 'active' : ''}`;

                    const a = document.createElement('a');
                    a.className = 'page-link';
                    a.href = `/list/${pageNum}`;
                    a.textContent = pageNum;

                    li.appendChild(a);
                    return li;
                };

                // Disable navigation buttons if needed
                if (totalPages <= 1) {
                    document.getElementById('prePage').classList.add('disabled');
                    document.getElementById('nextPage').classList.add('disabled');
                    return;
                }

                if (currentPage === 1) {
                    document.getElementById('prePage').classList.add('disabled');
                } else {
                    document.getElementById('prePage').href = `/list/${currentPage - 1}`;
                }

                if (currentPage === totalPages) {
                    document.getElementById('nextPage').classList.add('disabled');
                } else {
                    document.getElementById('nextPage').href = `/list/${currentPage + 1}`;
                }

                // Generate page numbers (max 10 visible at a time)
                const pageRange = Math.floor((currentPage - 1) / 10);
                const startPage = pageRange * 10 + 1;
                const endPage = Math.min(startPage + 9, totalPages);

                // Clear existing pages (keep first and last)
                const page1 = document.getElementById('page1');
                page1.querySelector('a').textContent = startPage;
                page1.querySelector('a').href = `/list/${startPage}`;

                // Remove existing page items
                const nextPageItem = document.getElementById('nextPage').parentNode;
                while (page1.nextElementSibling !== nextPageItem) {
                    page1.parentNode.removeChild(page1.nextElementSibling);
                }

                // Add new page items
                for (let i = startPage + 1; i <= endPage; i++) {
                    const pageItem = createPageItem(i, i === currentPage);
                    page1.parentNode.insertBefore(pageItem, nextPageItem);
                }

                // Add ellipsis if needed
                if (endPage < totalPages) {
                    const ellipsisItem = document.createElement('li');
                    ellipsisItem.className = 'page-item disabled';
                    ellipsisItem.innerHTML = '<span class="page-link">...</span>';
                    page1.parentNode.insertBefore(ellipsisItem, nextPageItem);
                }
            });
        </script>
    </body>
</html>
